<template>
    <div>
            <template v-if="!mobileNar">
                <div :class="{isHide:isHide}" class="home-fixed">
                <div id="header">
                    <el-menu
                            :default-active="activeMenuName"
                            mode="horizontal"
                            router
                            active-text-color="#2196f3"
                            text-color="#495060"
                            background-color="transparent"
                            style="border: none"
                    >

                        <el-row :gutter="20">

                            <el-col :span="4" :md="4" :sm="4" :xs="4">
                                <div class="logo">
                                    <el-tooltip
                                            :content="$t('m.Click_To_Change_Web_Language')"
                                            placement="bottom"
                                            effect="light"
                                    >
                                        <el-image
                                                style="width: 139px; height: 50px"
                                                :src="imgUrl"
                                                fit="scale-down"
                                                @click="changeWebLanguage"
                                        ></el-image>
                                    </el-tooltip>
                                </div>
                            </el-col>
                            <el-col :span="16" :md="16" :sm="16 " :xs="16" style="display: flex;justify-content: center">
                                <template v-if="mode == 'defalut'">
                                    <el-menu-item index="/home"
                                    >{{ $t('m.NavBar_Home') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item index="/problem"
                                    >{{ $t('m.NavBar_Problem') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item index="/training"
                                    >{{ $t('m.NavBar_Training') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item index="/contest"
                                    >{{ $t('m.NavBar_Contest') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item index="/group"
                                    >{{ $t('m.NavBar_Group') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item index="/acm-rank">
                                        {{ $t('m.NavBar_Rank') }}
                                    </el-menu-item>
                                    <el-menu-item index="/discussion"
                                                  v-if="websiteConfig.openPublicDiscussion"
                                    >{{ $t('m.NavBar_Discussion') }}
                                    </el-menu-item
                                    >

                                    <el-submenu index="about">
                                        <template slot="title"
                                        >{{ $t('m.NavBar_About') }}
                                        </template
                                        >
                                        <el-menu-item index="/introduction">{{
                                            $t('m.NavBar_Introduction')
                                            }}
                                        </el-menu-item>
                                        <el-menu-item index="/developer">{{
                                            $t('m.NavBar_Developer')
                                            }}
                                        </el-menu-item>
                                    </el-submenu>
                                </template>
                                <template v-else-if="mode == 'training'">
                                    <el-menu-item index="/home"
                                    >{{ $t('m.NavBar_Back_Home') }}
                                    </el-menu-item
                                    >
                                    <template v-if="$route.params.groupID">
                                        <el-menu-item :index="'/group/' + $route.params.groupID"
                                        ><i
                                                class="fa fa-users navbar-icon"
                                        ></i
                                        >{{ $t('m.NavBar_Group_Home') }}
                                        </el-menu-item>
                                    </template>
                                    <el-menu-item :index="getTrainingHomePath()"
                                    >{{ $t('m.NavBar_Training_Home') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item :index="getTrainingProblemListPath()"
                                    >{{ $t('m.Problem_List') }}
                                    </el-menu-item
                                    >
                                </template>
                                <template v-else-if="mode == 'contest'">
                                    <el-menu-item index="/home"
                                    >{{ $t('m.NavBar_Back_Home') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item :index="'/contest/' + $route.params.contestID"
                                    >{{ $t('m.NavBar_Contest_Home') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item :index="'/contest/' + $route.params.contestID + '/problems'"
                                    >{{ $t('m.Problem_List') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item
                                            :index="'/contest/' + $route.params.contestID + '/submissions?onlyMine=true'"
                                    >{{ $t('m.NavBar_Contest_Own_Submission') }}
                                    </el-menu-item
                                    >
                                    <el-menu-item :index="'/contest/' + $route.params.contestID + '/rank'"
                                    >{{ $t('m.NavBar_Contest_Rank') }}
                                    </el-menu-item
                                    >
                                </template>
                                <template v-else-if="mode == 'group'">
                                    <el-menu-item index="/home"
                                    >{{ $t('m.NavBar_Back_Home') }}
                                    </el-menu-item
                                    >
                                    <template v-if="$route.params.groupID">
                                        <el-menu-item :index="'/group/' + $route.params.groupID"
                                        >{{ $t('m.NavBar_Group_Home') }}
                                        </el-menu-item>
                                    </template>
                                    <el-menu-item :index="'/group/' + $route.params.groupID + '/problem'"
                                    >{{ $t('m.Problem_List') }}
                                    </el-menu-item
                                    >
                                </template>
                            </el-col>
                            <el-col :span="4" :md="4" :sm="4 " :xs="4">
                                <template v-if="!isAuthenticated">
                                    <div class="btn-menu">
                                        <el-button
                                                style="color: white;background-color: rgba(0,0,0,0.83);border: none"
                                                size="medium"
                                                round
                                                @click="handleBtnClick('Login')"
                                        >{{ $t('m.NavBar_Login') }}
                                        </el-button>
                                        <el-button
                                                v-if="websiteConfig.register"
                                                size="medium"
                                                round
                                                @click="handleBtnClick('Register')"
                                                style="margin-left: 5px"
                                        >{{ $t('m.NavBar_Register') }}
                                        </el-button>
                                    </div>
                                </template>
                                <template v-else>
                                    <el-dropdown
                                            class="drop-menu"
                                            @command="handleRoute"
                                            placement="bottom"
                                            trigger="hover"
                                            style="margin-left: 5px"
                                    >
              <span class="el-dropdown-link">
                {{ userInfo.nickname }}<i class="el-icon-arrow-down" style="color: black;margin-left: 5px"></i>
              </span>

                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="/user-home">{{
                                                $t('m.NavBar_UserHome')
                                                }}
                                            </el-dropdown-item>
                                            <el-dropdown-item command="/status?onlyMine=true">{{
                                                $t('m.NavBar_Submissions')
                                                }}
                                            </el-dropdown-item>
                                            <el-dropdown-item command="/setting">{{
                                                $t('m.NavBar_Setting')
                                                }}
                                            </el-dropdown-item>
                                            <el-dropdown-item v-if="isAdminRole" command="/admin">{{
                                                $t('m.NavBar_Management')
                                                }}
                                            </el-dropdown-item>
                                            <el-dropdown-item divided command="/logout">{{
                                                $t('m.NavBar_Logout')
                                                }}
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                        <!--                            通知-->
                                    </el-dropdown>
                                    <avatar
                                            :username="userInfo.username"
                                            :inline="true"
                                            :size="30"
                                            color="#FFF"
                                            :src="avatar"
                                            class="drop-avatar"
                                            @click="handleRoute('/user-home')"
                                    ></avatar>
                                    <el-dropdown
                                            class="drop-msg"
                                            @command="handleRoute"
                                            placement="bottom"
                                    >
              <span class="el-dropdown-link">
                <i class="el-icon-bell" style="color: black"></i>
                <svg
                        v-if="
                    unreadMessage.comment > 0 ||
                      unreadMessage.reply > 0 ||
                      unreadMessage.like > 0 ||
                      unreadMessage.sys > 0 ||
                      unreadMessage.mine > 0
                  "
                        width="10"
                        height="10"
                        style="vertical-align: top;margin-left: -11px;margin-top: 3px;"
                >
                  <circle cx="5" cy="5" r="5" style="fill: red;"></circle>
                </svg>
              </span>

                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="/message/discuss">
                                                <span>{{ $t('m.DiscussMsg') }}</span>
                                                <span class="drop-msg-count" v-if="unreadMessage.comment > 0">
                    <MsgSvg :total="unreadMessage.comment"></MsgSvg>
                  </span>
                                            </el-dropdown-item>
                                            <el-dropdown-item command="/message/reply">
                                                <span>{{ $t('m.ReplyMsg') }}</span>
                                                <span class="drop-msg-count" v-if="unreadMessage.reply > 0">
                    <MsgSvg :total="unreadMessage.reply"></MsgSvg>
                  </span>
                                            </el-dropdown-item>
                                            <el-dropdown-item command="/message/like">
                                                <span>{{ $t('m.LikeMsg') }}</span>
                                                <span class="drop-msg-count" v-if="unreadMessage.like > 0">
                    <MsgSvg :total="unreadMessage.like"></MsgSvg>
                  </span>
                                            </el-dropdown-item>
                                            <el-dropdown-item command="/message/sys">
                                                <span>{{ $t('m.SysMsg') }}</span>
                                                <span class="drop-msg-count" v-if="unreadMessage.sys > 0">
                    <MsgSvg :total="unreadMessage.sys"></MsgSvg>
                  </span>
                                            </el-dropdown-item>
                                            <el-dropdown-item command="/message/mine">
                                                <span>{{ $t('m.MineMsg') }}</span>
                                                <span class="drop-msg-count" v-if="unreadMessage.mine > 0">
                    <MsgSvg :total="unreadMessage.mine"></MsgSvg>
                  </span>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </template>
                            </el-col>


                        </el-row>

                    </el-menu>
                </div>
                </div>
<!--                <div id="header-hidden" v-show="isScrolled"></div>-->
            </template>

        <template v-else>
            <div style="top:0px;left:0px;">
                <mu-appbar class="mobile-nav" color="rgb(141 141 141)">
                    <mu-button icon slot="left" @click="opendrawer = !opendrawer">
                        <i class="el-icon-s-unfold"></i>
                    </mu-button>
                    <el-tooltip
                            :content="$t('m.Click_To_Change_Web_Language')"
                            placement="bottom"
                            effect="dark"
                    >
          <span @click="changeWebLanguage">
          {{
              websiteConfig.shortName ? websiteConfig.shortName : 'OJ'
              }}
          </span>
                    </el-tooltip>
                    <mu-button
                            flat
                            slot="right"
                            @click="handleBtnClick('Login')"
                            v-show="!isAuthenticated"
                    >{{ $t('m.NavBar_Login') }}
                    </mu-button
                    >
                    <mu-button
                            flat
                            slot="right"
                            @click="handleBtnClick('Register')"
                            v-show="!isAuthenticated && websiteConfig.register"
                    >{{ $t('m.NavBar_Register') }}
                    </mu-button
                    >

                    <mu-menu slot="right" v-show="isAuthenticated" :open.sync="openmsgmenu">
                        <mu-button flat>
                            <mu-icon value=":el-icon-message-solid" size="24"></mu-icon>
                            <svg
                                    v-if="
                unreadMessage.comment > 0 ||
                  unreadMessage.reply > 0 ||
                  unreadMessage.like > 0 ||
                  unreadMessage.sys > 0 ||
                  unreadMessage.mine > 0
              "
                                    width="10"
                                    height="10"
                                    style="margin-left: -11px;margin-top: -13px;"
                            >
                                <circle cx="5" cy="5" r="5" style="fill: red;"></circle>
                            </svg>
                        </mu-button>
                        <mu-list slot="content" @change="handleCommand">
                            <mu-list-item button value="/message/discuss">
                                <mu-list-item-content>
                                    <mu-list-item-title>
                                        {{ $t('m.DiscussMsg') }}
                                        <span class="drop-msg-count" v-if="unreadMessage.comment > 0">
                    <MsgSvg :total="unreadMessage.comment"></MsgSvg>
                  </span>
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>
                            <mu-list-item button value="/message/reply">
                                <mu-list-item-content>
                                    <mu-list-item-title>
                                        {{ $t('m.ReplyMsg') }}
                                        <span class="drop-msg-count" v-if="unreadMessage.reply > 0">
                    <MsgSvg :total="unreadMessage.reply"></MsgSvg>
                  </span>
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>
                            <mu-list-item button value="/message/like">
                                <mu-list-item-content>
                                    <mu-list-item-title>
                                        {{ $t('m.LikeMsg') }}
                                        <span class="drop-msg-count" v-if="unreadMessage.like > 0">
                    <MsgSvg :total="unreadMessage.like"></MsgSvg>
                  </span>
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>
                            <mu-list-item button value="/message/sys">
                                <mu-list-item-content>
                                    <mu-list-item-title>
                                        {{ $t('m.SysMsg') }}
                                        <span class="drop-msg-count" v-if="unreadMessage.sys > 0">
                    <MsgSvg :total="unreadMessage.sys"></MsgSvg>
                  </span>
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>

                            <mu-list-item button value="/message/mine">
                                <mu-list-item-content>
                                    <mu-list-item-title>
                                        {{ $t('m.MineMsg') }}
                                        <span class="drop-msg-count" v-if="unreadMessage.mine > 0">
                    <MsgSvg :total="unreadMessage.mine"></MsgSvg>
                  </span>
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                        </mu-list>
                    </mu-menu>

                    <mu-menu
                            slot="right"
                            v-if="isAuthenticated"
                            :open.sync="openusermenu"
                    >
                        <mu-button flat>
                            <avatar
                                    :username="userInfo.username"
                                    :inline="true"
                                    :size="30"
                                    color="#FFF"
                                    :src="avatar"
                                    :title="userInfo.username"
                            ></avatar>
                            <i class="el-icon-caret-bottom"></i>
                        </mu-button>
                        <mu-list slot="content" @change="handleCommand">
                            <mu-list-item button value="/user-home">
                                <mu-list-item-content>
                                    <mu-list-item-title>{{
                                        $t('m.NavBar_UserHome')
                                        }}
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>
                            <mu-list-item button value="/status?onlyMine=true">
                                <mu-list-item-content>
                                    <mu-list-item-title>{{
                                        $t('m.NavBar_Submissions')
                                        }}
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>
                            <mu-list-item button value="/setting">
                                <mu-list-item-content>
                                    <mu-list-item-title>{{
                                        $t('m.NavBar_Setting')
                                        }}
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>
                            <mu-list-item button value="/admin" v-show="isAdminRole">
                                <mu-list-item-content>
                                    <mu-list-item-title>{{
                                        $t('m.NavBar_Management')
                                        }}
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                            <mu-divider></mu-divider>

                            <mu-list-item button value="/logout">
                                <mu-list-item-content>
                                    <mu-list-item-title>{{
                                        $t('m.NavBar_Logout')
                                        }}
                                    </mu-list-item-title>
                                </mu-list-item-content>
                            </mu-list-item>
                        </mu-list>
                    </mu-menu>
                </mu-appbar>

                <mu-appbar style="width: 100%;">
                    <!--占位，刚好占领导航栏的高度-->
                </mu-appbar>

                <mu-drawer :open.sync="opendrawer" :docked="false" :right="false">
                    <mu-list toggle-nested>
                        <mu-list-item
                                button
                                to="/home"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-s-home" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{ $t('m.NavBar_Home') }}</mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                to="/problem"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-s-grid" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{
                                $t('m.NavBar_Problem')
                                }}
                            </mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                to="/training"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-s-claim" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{
                                $t('m.NavBar_Training')
                                }}
                            </mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                to="/contest"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-trophy" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{
                                $t('m.NavBar_Contest')
                                }}
                            </mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                to="/status"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-s-marketing" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{ $t('m.NavBar_Status') }}</mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                :ripple="false"
                                nested
                                :open="openSideMenu === 'rank'"
                                @toggle-nested="openSideMenu = arguments[0] ? 'rank' : ''"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-s-data" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{ $t('m.NavBar_Rank') }}</mu-list-item-title>
                            <mu-list-item-action>
                                <mu-icon
                                        class="toggle-icon"
                                        size="24"
                                        value=":el-icon-arrow-down"
                                ></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item
                                    button
                                    :ripple="false"
                                    slot="nested"
                                    to="/acm-rank"
                                    @click="opendrawer = !opendrawer"
                                    active-class="mobile-menu-active"
                            >
                                <mu-list-item-title>{{
                                    $t('m.NavBar_ACM_Rank')
                                    }}
                                </mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item
                                    button
                                    :ripple="false"
                                    slot="nested"
                                    to="/oi-rank"
                                    @click="opendrawer = !opendrawer"
                                    active-class="mobile-menu-active"
                            >
                                <mu-list-item-title>{{
                                    $t('m.NavBar_OI_Rank')
                                    }}
                                </mu-list-item-title>
                            </mu-list-item>
                        </mu-list-item>

                        <mu-list-item
                                v-if="websiteConfig.openPublicDiscussion"
                                button
                                to="/discussion"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":fa fa-comments" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{
                                $t('m.NavBar_Discussion')
                                }}
                            </mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                to="/group"
                                @click="opendrawer = !opendrawer"
                                active-class="mobile-menu-active"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":fa fa-users" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{ $t('m.NavBar_Group') }}</mu-list-item-title>
                        </mu-list-item>

                        <mu-list-item
                                button
                                :ripple="false"
                                nested
                                :open="openSideMenu === 'about'"
                                @toggle-nested="openSideMenu = arguments[0] ? 'about' : ''"
                        >
                            <mu-list-item-action>
                                <mu-icon value=":el-icon-info" size="24"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>{{ $t('m.NavBar_About') }}</mu-list-item-title>
                            <mu-list-item-action>
                                <mu-icon
                                        class="toggle-icon"
                                        size="24"
                                        value=":el-icon-arrow-down"
                                ></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item
                                    button
                                    :ripple="false"
                                    slot="nested"
                                    to="/introduction"
                                    @click="opendrawer = !opendrawer"
                                    active-class="mobile-menu-active"
                            >
                                <mu-list-item-title>{{
                                    $t('m.NavBar_Introduction')
                                    }}
                                </mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item
                                    button
                                    :ripple="false"
                                    slot="nested"
                                    to="/developer"
                                    @click="opendrawer = !opendrawer"
                                    active-class="mobile-menu-active"
                            >
                                <mu-list-item-title>{{
                                    $t('m.NavBar_Developer')
                                    }}
                                </mu-list-item-title>
                            </mu-list-item>
                        </mu-list-item>
                    </mu-list>
                </mu-drawer>

            </div>
        </template>
        <!--     登录组件-->
        <el-dialog
                :visible.sync="modalVisible"
                width="370px"
                class="dialog"
                :title="title"
                :close-on-click-modal="true"
                style="background: url(https://img.js.design/assets/Resources/background/login-bg-5.jpg) 0 0 / cover;
"
        >
            <component :is="modalStatus.mode" v-if="modalVisible"></component>
            <div slot="footer" style="display: none"></div>
        </el-dialog>
    </div>
</template>
<script>
import Login from '@/components/oj/common/Login';
import Register from '@/components/oj/common/Register';
import ResetPwd from '@/components/oj/common/ResetPassword';
import MsgSvg from '@/components/oj/msg/msgSvg';
import {mapGetters, mapActions} from 'vuex';
import Avatar from 'vue-avatar';
import api from '@/common/api';
import UserMsg from "../../../views/oj/message/UserMsg.vue";
import Message from "../../../views/oj/message/message.vue";

export default {
    components: {
        Message,
        UserMsg,
        Login,
        Register,
        ResetPwd,
        Avatar,
        MsgSvg,
    },
    created() {
        this.page_width();
        window.onresize = () => {
            this.page_width();
            this.setHiddenHeaderHeight();
        };
    },
    mounted() {
        this.switchMode();
        this.setHiddenHeaderHeight();
        if (this.isAuthenticated) {
            this.getUnreadMsgCount();
            this.msgTimer = setInterval(() => {
                this.getUnreadMsgCount();
            }, 120 * 1000);
        }
        window.addEventListener("scroll", this.scrolling)

    },
    beforeDestroy() {
        clearInterval(this.msgTimer);
    },
    data() {
        return {
            mode: 'defalut',
            centerDialogVisible: false,
            mobileNar: false,
            opendrawer: false,
            isHide:false,
            oldScrollTop:0,
            openusermenu: false,
            openmsgmenu: false,
            openSideMenu: '',
            imgUrl: require('@/assets/logo.png'),
            avatarStyle:
                'display: inline-flex;width: 30px;height: 30px;border-radius: 50%;align-items: center;justify-content: center;text-align: center;user-select: none;',
        };
    },
    methods: {
        ...mapActions(['changeModalStatus']),
        page_width() {
            let screenWidth = window.screen.width;
            if (screenWidth < 992) {
                this.mobileNar = true;
            } else {
                this.mobileNar = false;
            }
        },
        scrolling(){
            let scropllTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
            let scrollStep=scropllTop-this.oldScrollTop;
            this.oldScrollTop=scropllTop;
            if (scrollStep<0){
                this.isHide=false;
            }else {
                this.isHide=true;
            }
        },
        handleBtnClick(mode) {
            this.changeModalStatus({
                mode,
                visible: true,
            });
        },
        handleRoute(route) {
            //电脑端导航栏路由跳转事件
            if (route && route.split('/')[1] != 'admin') {
                this.$router.push(route);
            } else {
                window.open('/admin/');
            }
        },
        handleCommand(route) {
            // 移动端导航栏路由跳转事件
            this.openusermenu = false;
            this.openmsgmenu = false;
            if (route && route.split('/')[1] != 'admin') {
                this.$router.push(route);
            } else {
                window.open('/admin/');
            }
        },
        getUnreadMsgCount() {
            api.getUnreadMsgCount().then((res) => {
                let data = res.data.data;
                this.$store.dispatch('updateUnreadMessageCount', data);
                let sumMsg =
                    data.comment + data.reply + data.like + data.mine + data.sys;
                if (sumMsg > 0) {
                    if (this.webLanguage == 'zh-CN') {
                        this.$notify.info({
                            title: '未读消息',
                            message:
                                '亲爱的【' +
                                this.userInfo.username +
                                '】，您有最新的' +
                                sumMsg +
                                '条未读消息，请注意查看！',
                            position: 'bottom-right',
                            duration: 5000,
                        });
                    } else {
                        this.$notify.info({
                            title: 'Unread Message',
                            message:
                                'Dear【' +
                                this.userInfo.username +
                                '】, you have the latest ' +
                                sumMsg +
                                ' unread messages. Please check them!',
                            position: 'bottom-right',
                            duration: 5000,
                        });
                    }
                }
            });
        },
        changeWebLanguage() {
            this.$store.commit('changeWebLanguage', {language: this.webLanguage == 'zh-CN' ? 'en-US' : 'zh-CN'});
        },
        setHiddenHeaderHeight() {
            if (!this.mobileNar) {
                try {
                    let headerHeight = document.getElementById('header').offsetHeight;
                    document.getElementById('header-hidden').setAttribute('style', 'height:' + headerHeight + 'px')
                } catch (e) {
                }
            }
        },
        switchMode() {
            if (this.$route.meta.fullScreenSource) {
                this.mode = this.$route.meta.fullScreenSource;
            } else {
                this.mode = 'defalut';
            }
        },
        getTrainingHomePath() {
            let tid = this.$route.params.trainingID
            let gid = this.$route.params.groupID
            if (gid) {
                return `/group/${gid}/training/${tid}`;
            } else {
                return `/training/${tid}`;
            }
        },
        getTrainingProblemListPath() {
            let tid = this.$route.params.trainingID
            let gid = this.$route.params.groupID
            if (gid) {
                return `/group/${gid}/training/${tid}/problems`;
            } else {
                return `/training/${tid}/problems`;
            }
        }
    },
    computed: {
        ...mapGetters([
            'modalStatus',
            'userInfo',
            'isAuthenticated',
            'isAdminRole',
            'token',
            'websiteConfig',
            'unreadMessage',
            'webLanguage',
        ]),
        avatar() {
            return this.$store.getters.userInfo.avatar;
        },
        activeMenuName() {
            if (this.$route.path.split('/')[1] == 'submission-detail') {
                return '/status';
            } else if (this.$route.path.split('/')[1] == 'discussion-detail') {
                return '/discussion';
            }
            return '/' + this.$route.path.split('/')[1];
        },
        modalVisible: {
            get() {
                return this.modalStatus.visible;
            },
            set(value) {
                this.changeModalStatus({visible: value});
            },
        },
        title: {
            get() {
                let ojName = this.websiteConfig.shortName
                    ? this.websiteConfig.shortName
                    : 'OJ';
                if (this.modalStatus.mode == 'ResetPwd') {
                    return this.$i18n.t('m.Dialog_Reset_Password') + ' - ' + ojName;
                } else {
                    return (
                        this.$i18n.t('m.Dialog_' + this.modalStatus.mode) + ' - ' + ojName
                    );
                }
            },
        },
    },
    watch: {
        isAuthenticated() {
            if (this.isAuthenticated) {
                if (this.msgTimer) {
                    clearInterval(this.msgTimer);
                }
                this.getUnreadMsgCount();
                this.msgTimer = setInterval(() => {
                    this.getUnreadMsgCount();
                }, 120 * 1000);
            } else {
                clearInterval(this.msgTimer);
            }
        },
        $route() {
            this.switchMode();
        }
    },
};
</script>
<style scoped>
#header {
    min-width: 300px;
    //position: fixed;
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 2000;
//background-color: #fff; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0);
}

.home-fixed {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: #fff;
    transition: all 0.3s;
}
.home-fixed.isHide {
    top: -104px;
}

.mobile-nav {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2500;
    height: auto;
    width: 100%;
}

#drawer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 1000;
    width: 100%;
    box-shadow: 00px 0px 00px rgb(255, 255, 255), 0px 0px 10px rgb(255, 255, 255),
    0px 0px 0px rgb(255, 255, 255), 1px 1px 0px rgb(218, 218, 218);
}

.logo {
    cursor: pointer;
    margin-left: 2%;
    margin-right: 2%;
    float: left;
    width: 139px;
    height: 42px;
    margin-top: 5px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #000000 !important;
}

.el-icon-arrow-down {
    font-size: 18px;
}

.drop-menu {
    float: right;
    margin-right: 30px;
    position: relative;
    font-weight: 500;
    right: 10px;
    margin-top: 18px;
    font-size: 18px;
}

.drop-avatar {
    float: right;
    margin-right: 15px;
    position: relative;
    margin-top: 16px;
}

.drop-msg {
    float: right;
    font-size: 25px;
    margin-right: 10px;
    position: relative;
    margin-top: 13px;
}

.drop-msg-count {
    margin-left: 2px;
}

.btn-menu {
    font-size: 16px;
    float: right;
    margin-right: 10px;
    margin-top: 12px;
}

/deep/ .el-dialog {
    border-radius: 10px !important;
    text-align: center;
}

/deep/ .el-dialog__header .el-dialog__title {
    font-size: 22px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1em;
    color: #4e4e4e;
}

.el-submenu__title i {
    color: #495060 !important;
}

.el-menu-item {
    padding: 0 13px;
}

.el-menu-item:hover, .el-menu .el-menu-item:hover {
    border-bottom: 2px solid #2474b5 !important;
}

.el-menu .el-menu-item:hover,
.el-menu .el-menu-item:hover i,
.el-submenu .el-submenu__title:hover,
.el-submenu .el-submenu__title:hover i {
    outline: 0 !important;
    color: #2E95FB !important;
//background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important; transition: all .2s ease;
}

.el-menu .el-menu-item.is-active,
.el-menu .el-menu-item.is-active i,
.el-submenu.is-active,
.el-submenu.is-active i {
    color: #2E95FB !important;
//background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important; transition: all .2s ease;
}

.el-menu--horizontal .el-menu .el-menu-item:hover,
.el-submenu /deep/ .el-submenu__title:hover {
    color: #2E95FB !important;
//background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}

.el-menu-item i {
    color: #495060;
}

.is-active .el-submenu__title i,
.is-active {
    color: #2196f3 !important;
}

.el-menu-item.is-active i {
    color: #2196f3 !important;
}

.navbar-icon {
    margin-right: 5px !important;
    width: 24px !important;
    text-align: center !important;
}

.el-icon-arrow-down:before {
    content: none;
}

#hcone {
    ::v-deep .el-submenu__title {
        .el-icon-arrow-down {
            display: none;
        }
    }
}
</style>
